{% extends "base.html" %}
{% block title %}Browse Lawyers - AI Legal Assistant{% endblock %}

{% block content %}
<div class="container">
    <h1 class="page-title"><i class="fas fa-users"></i> Browse Lawyers</h1>
    <p class="page-subtitle">{{ lawyers|length }} lawyers found</p>

    <!-- Filters -->
    <div class="card" style="margin-bottom:1.5rem;">
        <div class="card-body">
            <form method="GET" action="/client/lawyers" style="display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;">
                <div class="form-group" style="margin:0;flex:1;min-width:180px;">
                    <label class="form-label">Specialization</label>
                    <select name="specialization" class="form-control">
                        <option value="">All Specializations</option>
                        {% for cat in categories %}
                        <option value="{{ cat }}" {% if selected_spec == cat %}selected{% endif %}>{{ cat }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group" style="margin:0;flex:1;min-width:160px;">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control" placeholder="e.g. Lahore" value="{{ selected_city }}">
                </div>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Filter
                </button>
                <a href="/client/lawyers" class="btn btn-outline">Clear</a>
            </form>
        </div>
    </div>

    {% if lawyers %}
    <div class="grid-2">
        {% for lawyer in lawyers %}
        <div class="lawyer-card">
            <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;">
                <div>
                    <div class="lawyer-name">{{ lawyer.name }}</div>
                    <div class="lawyer-firm">{{ lawyer.law_firm_name }}</div>
                </div>
                <span class="badge badge-primary">{{ lawyer.specialization }}</span>
            </div>
            <div class="lawyer-meta">
                <span><i class="fas fa-map-marker-alt"></i> {{ lawyer.city }}</span>
                <span><i class="fas fa-briefcase"></i> {{ lawyer.experience_years }} yrs exp</span>
                <span class="stars"><i class="fas fa-star"></i> {{ lawyer.rating }}</span>
                <span><i class="fas fa-chart-line"></i> {{ lawyer.success_rate_percentage }}% success</span>
                <span><i class="fas fa-folder"></i> {{ lawyer.total_cases_handled }} cases</span>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-top:0.8rem;flex-wrap:wrap;gap:0.5rem;">
                <span style="font-weight:700;color:#0E7A43;font-size:1.05rem;">PKR {{ "{:,.0f}".format(lawyer.consultation_fee_pkr) }}</span>
                <div style="display:flex;gap:0.5rem;">
                    <a href="mailto:{{ lawyer.contact_email }}" class="btn btn-outline btn-sm"><i class="fas fa-envelope"></i></a>
                    <a href="/client/book-appointment/{{ lawyer.id }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-calendar-plus"></i> Book
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div style="text-align:center;padding:3rem;color:var(--text-muted);">
        <i class="fas fa-search" style="font-size:2.5rem;margin-bottom:1rem;display:block;"></i>
        No lawyers found matching your filters.
    </div>
    {% endif %}
</div>
{% endblock %}